<template>
  <div class="warp-box" id="upadd">
    <el-row class="search-box">
      <el-col :span="24" class="add-bottom">
        <span class="personal-title" v-text="parames.id?'新建产品':'编辑产品'"></span>
      </el-col>
    </el-row>
    <div class="main-box">
      <div class="inforlist">
        <div class="inforadd" style="margin-top: 30px;width: 880px">
          <el-form
            v-loading="loading"
            :model="parames"
            :rules="rules"
            ref="parames"
            label-width="140px"
            class="demo-ruleForm"
          >
            <el-form-item label="LOGO:" prop="logoUrl" >
              <el-input
                style="width:400px;float:left"
                :disabled="true"
                v-model="parames.logoUrl"
                placeholder="请上传logo"
              ></el-input>
              <el-upload
                style="float:left"
                class="upload-demo"
                name="files"
                accept=".jpg,.png,.jpeg,.gif"
                :action="action"
                :headers="headers"
                :on-success="uploadimg"
                :on-progress="onUpload"
                :on-error="onError"
                :show-file-list="false"
              >
                <span class="search-btn backorgin" style="margin: 0 15px">
                  <i class="element-icons icon-shangchuan" style="font-size:20px;"></i>
                </span>
              </el-upload>

              <el-button round @click="yulan" :disabled="!parames.logoUrl">预览</el-button>
            </el-form-item>
            <el-form-item label="名称:" prop="name">
              <el-input style="width:400px;" v-model="parames.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="跳转链接:" prop="redirectUrl">
              <el-input style="width:400px;" v-model="parames.redirectUrl" placeholder="请输入跳转链接"></el-input>
            </el-form-item>
            <el-form-item label="结算方式:" prop="tradeMode">
              <el-select v-model="parames.tradeMode" placeholder="请选择结算方式">
                <el-option label="" value="请选择结算方式"></el-option>
                <el-option label="CPA" value="CPA"></el-option>
                <el-option label="CPS" value="CPS"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="单价/佣金:" prop="unitPrice">
              <el-input style="width:400px;" v-model="parames.unitPrice" placeholder="请输入单价/佣金"></el-input>
            </el-form-item>
            <el-form-item label="状态:" prop="status">
              <el-popover
                placement="right"
                title
                offset="300"
                width="200"
                trigger="manual"
                v-model="statusBtn"
                content="温馨提示：选择下线后应用就不会显示在前端界面上！"
              ></el-popover>
              <el-switch
                v-model="parames.status"
                active-value="1"
                inactive-value="0"
                active-text="上线"
                inactive-text="下线"
                @change="changeStatus"
              ></el-switch>
            </el-form-item>
            <el-form-item label="所属模块:" prop="type">
              <el-checkbox-group v-model="moduleKeys">
                <el-checkbox
                  :label="item.key"
                  border
                  :checked="item.selected"
                  v-for="item in parames.modules"
                  :key="item.key"
                >{{item.name}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="简介:" prop="memo">
              <el-input
              rows="6"
                style="width:400px;"
                type="textarea"
                v-model="parames.memo"
                placeholder="请输入简介"
              ></el-input>
            </el-form-item>
            <el-form-item label="利率:" prop="rate">
              <el-input
                style="width:400px;"
                v-model="parames.rate"
                type="number"
                placeholder="请输入利率"
              ></el-input>
            </el-form-item>
            <el-form-item label="成功率:" prop="successRate">
              <el-input
                style="width:400px;"
                v-model="parames.successRate"
                type="number"
                placeholder="请输入成功率"
              ></el-input>
            </el-form-item>
            <el-form-item label="额度:" prop="limit">
              <el-input style="width:400px;" v-model="parames.limit" placeholder="请输入额度"></el-input>
            </el-form-item>
            <el-form-item label="成功申请人数:" prop="successNum">
              <el-input
                style="width:400px;"
                v-model="parames.successNum"
                type="number"
                placeholder="请输入成功申请人数"
              ></el-input>
            </el-form-item>
            <el-form-item label="特点:" prop="feature">
              <el-input
                style="width:400px;"
                v-model="parames.feature"
                placeholder="请输入特点，多个以英文逗号分割"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button round type="primary" @click="handleSend">保存并返回列表</el-button>
              <el-button round @click="resetData">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      parames: {
        logoUrl: "",
        files: "",
        id: "",
        key: "",
        name: "",
        redirectUrl: "",
        tradeMode: "",
        unitPrice: "",
        status: '0',
        moduleKeys: [],
        modules: [],
        memo: "",
        rate: "",
        successRate: "",
        limit: "",
        successNum: "",
        feature: ""
      },
      loading: false,
      action: "",
      statusBtn: false,
      headers: {
        "X-Requested-With": "XMLHttpRequest"
      },
      moduleKeys: [],
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        redirectUrl: [
          { required: true, message: "请输入跳转链接", trigger: "blur" }
        ],
        unitPrice: [
          { required: true, message: "请输入单价佣金", trigger: "blur" }
        ],
        rate: [{ required: true, message: "请输入利率", trigger: "blur" }],
        successRate: [
          { required: true, message: "请输入成功率", trigger: "blur" }
        ],
        limit: [{ required: true, message: "请输入额度", trigger: "blur" }],
        successNum: [
          { required: true, message: "请输入成功申请人数", trigger: "blur" }
        ],
        feature: [{ required: true, message: "请输入特点", trigger: "blur" }]
      }
    };
  },
  methods: {
    changeStatus(val) {
      if (val == 0) {
        this.statusBtn = true;
        setTimeout(() => {
          this.statusBtn = false;
        }, 1000);
      }
    },
    uploadimg(response) {
      this.parames.logoUrl = response.data[0].url;
      this.loading = false
        if(response.code !== 10200) {
            this.$alert(response.msg, '提示')
        }
    },
    onError (err) {
        this.loading = false
        this.$alert('文件上传失败', '提示')
    },
    onUpload () {
        this.loading = true
    },
    yulan() {
      this.$alert("<img src=" + this.parames.logoUrl + ">", {
        dangerouslyUseHTMLString: true,
        showClose: true,
        showConfirmButton: false,
        closeOnClickModal: true,
        closeOnPressEscape: true,
        center: true
      });
    },
    handleSend() {
      let url = "";
      if (this.parames.id) {
        url = "tx/product/edit";
      } else {
        url = "tx/product/save";
      }
      this.$refs.parames.validate(valid => {
        if (valid) {
          var mode = "";
          if (this.moduleKeys) {
            mode = this.moduleKeys.join(",");
          }
          this.$axios
            .post(url, {
              logoUrl: this.parames.logoUrl,
              files: "",
              id: this.parames.id,
              key: this.parames.key,
              name: this.parames.name,
              redirectUrl: this.parames.redirectUrl,
              tradeMode: this.parames.tradeMode,
              unitPrice: this.parames.unitPrice,
              status: this.parames.status,
              moduleKeys: mode,
              memo: this.parames.memo,
              rate: this.parames.rate,
              successRate: this.parames.successRate,
              limit: this.parames.limit,
              successNum: this.parames.successNum,
              feature: this.parames.feature
            })
            .then(res => {
              if (res.code === 10200) {
                this.resetData();
                this.$router.push({ name: "sorce_list" });
              }
            });
        } else {
          return false;
        }
      });
    },
    render(id) {
      this.$axios.get("tx/product/edit/" + id).then(res => {
        if (res.code === 10200) {
          if (id === "0") {
            this.parames.modules = res.data.modules;
          } else {
            this.parames = res.data;
            this.parames.status = res.data.status + ''
          }
        }
      });
    },
    resetData(formName) {
      this.parames.ogoUrl = "";
      this.parames.files = "";
      this.parames.id = "";
      this.parames.key = "";
      this.parames.name = "";
      this.parames.redirectUrl = "";
      this.parames.tradeMode = "";
      this.parames.unitPrice = "";
      this.parames.status = 0;
      this.parames.moduleKeys = [];
      this.parames.memo = "";
      this.parames.rate = "";
      this.parames.successRate = "";
      this.parames.limit = "";
      this.parames.successNum = "";
      this.parames.feature = "";
      this.$refs.parames.resetFields();
    }
  },
  mounted() {
    this.parames.id = this.$route.query.id;
    if (this.parames.id) {
      this.render(this.parames.id);
    } else {
      this.render("0");
    }
    this.action = this.$axios.api + "/tx/upload/img";
  }
};
</script>
<style>
.el-checkbox + .el-checkbox {
  margin: 0;
  padding-right: 30px;
}
</style>
